import { getToken, setToken, removeToken, setTimeStamp, getTimeStamp } from '@/utils/auth'
import { login, getUserInfo, getUserDetailById } from '@/api/user'

//设置状态
const state = {
  token: getToken(),    //设置token为共享状态 一初始化vuex的时候  就先从缓存中读取
  userInfo: {}  //这里定义一个空对象
}
//修改状态
const mutations = {
  setToken(state, token) {
    state.token = token//将数据设置给vuex
    //然后同步给缓存，实现vuex中的数据持久化
    setToken(token)
  },
  removeToken(state) {
    state.token = null  //将vuex的数据置空
    removeToken()   //同步给缓存
  },
  setUserInfo(state, result) {
    //更新一个对象
    state.userInfo = result  //这样是响应式
    // state.userInfo = { ...result }  //这样也是响应式  属于浅拷贝
    //state.userInfo['username'] = result  //这样才不是响应式
  },
  removeUserInfo(state) {
    state.userInfo = {}  //清空用户信息  一定不能写null 不然报错
  }
}
//执行异步
const actions = {
  async login(context, data) {
    //调用api的接口
    const result = await login(data)
    //axios默认加了一层data  但是api的响应拦截器中已经处理过了，所以直接拿到了返回的data
    //如果为true  表示登录成功
    //context是对应上下文
    console.log(result);
    context.commit('setToken', result)//重新设置token
    //拿到token说明登录成功  此时需要存入时间戳用来设置token时效性
    setTimeStamp()  //设置当前的时间戳
  },
  async getUserInfo(context) {
    const result = await getUserInfo()  //获取到用户名和用户id等信息
    //此时得到ID了就可以获取用户的详情
    const baseInfo = await getUserDetailById(result.userId)//通过用户的Id获取用户的详情数据
    const baseResult = { ...result, ...baseInfo }//将两个接口获取到的用户数据进行合并
    context.commit('setUserInfo', baseResult) //提交到mutations
    return result  //这里为什么要return   这里是给后期做权限的时候留下的伏笔
  },
  //登出功能
  logout(context) {
    context.commit('removeToken')  //context提交删除的mutations的removetoken删除vuex中缓存资料
    context.commit('removeUserInfo')  //删除当前用户的渲染到页面的用户资料

  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}